<template>
  <div class="bg">
    <!-- <div class="tit">
      <div class="icon">
        <img src="../../assets/img/logo_icon.png" alt="" />
      </div>
      <div class="text">数字化农业管理平台</div>
    </div> -->
    <div class="loginPic">
      <img src="../../assets/img/maskGroup.png" alt="" />
    </div>
    <div class="box">
      <div class="login">
        <div class="boxTitle">数种田管理平台</div>
        <el-form
          :label-position="labelPosition"
          :model="form"
          :rules="rules"
          ref="loginform"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="form.userName"
              prefix-icon="el-icon-mobile-phone"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              :type="showEye ? 'password' : 'text'"
              placeholder="请输入密码"
            >
              <i slot="suffix" class="el-input__icon el-icon-open" v-if="!showEye && form.password" @click="showEye = !showEye"></i>
              <i slot="suffix" class="el-input__icon el-icon-turn-off" v-if="showEye && form.password" @click="showEye = !showEye"></i>
            </el-input>
          </el-form-item>
          <div class="errorText"><img src="@/assets/img/vectorClose.png" alt="" v-show="showError"/>{{errorText}}</div>
          <div class="loginSet">
            <span @click="toReg()">新用户注册</span>
            <span @click="toForget()">忘记密码</span>
          </div>
          <div class="loginCheckbox"><el-checkbox v-model="checked"></el-checkbox>同意并遵守<span @click="toProtocol(1)">《服务条款》</span>和<span  @click="toProtocol(2)">《隐私条款》</span></div>
          <div class="errorText" ><img src="@/assets/img/vectorClose.png" alt="" v-show="showProtocol"/>{{protocolText}}</div>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form>
      </div>
    </div>
    <register ref="register"/>
    <protocol ref="protocol"/>
  </div>
</template>

<script>
import register from './components/register' // 注册
import protocol from './components/protocol' // 协议
export default {
  components: {
    register,
    protocol
  },
  data () {
    return {
      showEye: false,
      labelPosition: 'top',
      form: {
        userName: '',
        password: ''
      },
      rules: {
        // userName: [
        //   { required: true, message: '账号必填', trigger: 'blur' },
        //   { min: 3, max: 11, message: '账号格式不正确', trigger: 'blur' }
        // ],
        // password: [
        //   { required: true, message: '密码必填', trigger: 'blur' },
        //   { min: 3, max: 30, message: '密码格式不正确', trigger: 'blur' }
        // ]
      },
      url: '',
      checked: false,
      showError: false,
      errorText: '',
      showProtocol: false,
      protocolText: ''
    }
  },
  created () {
    if (localStorage.getItem('boxCheck')) {
      this.checked = Number(localStorage.getItem('boxCheck')) === 1
    }
  },
  methods: {
    // 忘记密码
    toForget () {
      this.$alert('请联系农场管理员', '提示', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    },
    // 打开注册
    toReg () {
      this.$refs.register.getData()
    },
    // 打开协议
    toProtocol (type) {
      this.$refs.protocol.getData(type)
    },
    async login () {
      this.showError = false
      this.showProtocol = false
      this.protocolText = ''
      this.errorText = ''
      if (!this.form.userName) {
        this.$message.error('请输入账号')
        this.showError = true
        this.errorText = '账号必填, 请输入账号'
        return
      }
      if (!this.form.password) {
        this.$message.error('请输入密码')
        this.showError = true
        this.errorText = '密码必填, 请输入密码'
        return
      }
      if (this.form.password && this.form.password.length <= 3) {
        this.$message.error('密码格式不正确')
        this.showError = true
        this.errorText = '密码格式不正确'
        return
      }
      if (!this.checked) {
        this.showProtocol = true
        this.protocolText = '您尚未勾选《用户协议》及《隐私政策》，是否勾选并登录？'
        // this.$message.error('请勾选同意并遵守《服务条款》和《隐私条款》')
        return
      }
      try {
        await this.$refs.loginform.validate()
        this.loading = true
        this.$store.dispatch('user/loginAction', this.form).then(baseData => {
          if (baseData.code === 222) {
            this.showError = true
            this.errorText = '账号或密码有误，请确认后重新登录'
          }
          localStorage.setItem('boxCheck', this.checked ? 1 : 0)
          if (baseData.baseId) {
            this.$router.push('/shuzhongtian')
          } else {
            this.$router.push('/shuzhongtian/baseInfoCheck')
          }
        })
        // 采用模块化 没有开启命名空间  getters / mutation/action /... ===> this.$store.dispatch('mutation名称')
        // 采用模块化 开启命名空间     this.$store.dispatch('模块名称/mutation名称')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
  border: 0;
}
.bg {
  background: #FFFFFF;
  height: 100%;
  width: 100%;
  max-height: 100vh;
  display: flex;
  font-size: 0;
  align-items: center;
  position: relative;
  .loginPic {
    width: 71vw;
    font-size: 0;
    height: 100vh;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tit {
    position: absolute;
    top: 4.1667vw*0.843;
    left: 2.6042vw;
    display: flex;
    align-items: center;
    .icon {
      margin-right: 0.5208vw;
      width: .5625rem;
      height: .6rem;
      img {
      width: .5625rem;
      height: .6rem;
      }
    }
    .text {
      font-size: 30px;
      font-weight: 600;
    }
  }
}
.box {
  width: 29vw;
  background-color: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  .login {
    width: 75%;
    ::v-deep .el-input__inner {
      width: 100%;
      background: #fff;
      border-color: #ddd;
      height: 3.125vw * 0.834;
    }
    ::v-deep .el-form-item:nth-child(2) {
      margin-bottom: 0;
    }
    .errorText {
      color: #F76560;
      font-size: 0.7vw;
      display: flex;
      align-items: center;
      height: 3.5vh;
      img {
        width: 0.8vw;
        height: 0.8vw;
        margin-right: 0.5vw
      }
    }
    .loginSet {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9vw;
      color: #333
    }
    .boxTitle {
      font-size: 1.4vw;
      font-weight: bold;
      text-align: center;
      margin-bottom: 4vh;
    }
    .el-button {
      margin-top: 1.5vh;
      width: 100%;
      height: 3.125vw * 0.834;
      border-radius: 4px;
      background:#00C586;
    }
    .loginCheckbox {
      margin: 5vh 0 0 0;
      font-size: 0.7vw;
      ::v-deep .el-checkbox {
        margin-right: 0.3vw;
      }
      span {
        color: #00C586
      }
    }
  }
}

.prc {
  position: absolute;
  top: -48px;
  left: 50%;
  margin-left: -48px;
  z-index: 99;
  img {
    width: 96px;
    height: 96px;
  }
}

::v-deep .el-image {
  display: inline;
  width: 30%;
  height: 50px;
  position: absolute;
  right: 0;
}
</style>
